<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3个高阶函数的学习</title>
    <style>
        /* 使用 :root{} 来定义全局css变量 */
        :root {
            --mouse: 100;
        }
        .box2{
            width: calc(var(--mouse) * 1px);
            height: calc(var(--mouse) * 1px);
            background: #000;
        }

        .box {
            width: 220px;
            height: 100px;
            position: relative;
        }

        .box:before,
        .box:after {
            content: "";
            width: 60px;
            height: 60px;
            position: absolute;
            top: 0;
            left: 0;
            border: 20px solid #06c999;
            -moz-border-radius: 50px 50px 0;
            border-radius: 50px 50px 0 50px;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .box:after {
            left: auto;
            right: 0;
            -moz-border-radius: 50px 50px 50px 0;
            border-radius: 50px 50px 50px 0;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="box2"></div>
</body>

</html>
<script>
    const nums = [10, 20, 111, 222, 333, 40, 50];
    // 1、需求：取出所有小于100的数字
    let newNums = [];
    for (let n of nums) {
        if (n < 100) {
            newNums.push(n);
        }
    }
    console.log(newNums)  // [10,20,40,50]

    // 2、需求：将所有小于100的数字进行转化：全部*2
    let new2Nums = [];
    for (let n of newNums) {
        new2Nums.push(n * 2)
    }
    console.log(new2Nums) // [20, 40, 80, 100]

    // 3、需求：将所有new2Nums数字相加，得到最终的结果
    let total = 0;
    for (let n of new2Nums) {
        total += n
    }
    console.log(total)  // 240

    /*
    接下来是3个高阶函数，实现同样的需求 
    filter、map、reduce
    */

    // 1、需求：取出所有小于100的数字
    // filter中的回调函数有一个要求：必须返回一个Boolean值
    // true：当返回true时，函数内部会自动将这次回调的n加入到新的数组中
    // false：当返回false时，函数内部会过滤掉这次的n
    let new3Nums = nums.filter(function (n) {
        return n < 100
    })
    console.log(new3Nums) // [10, 20, 40, 50]

    // 2、需求：将所有小于100的数字进行转化：全部*2
    let new4Nums = new3Nums.map(function (n) {
        return n * 2
    })
    console.log(new4Nums) // [20, 40, 80, 100]

    // 3、需求：将所有new2Nums数字相加，得到最终的结果
    // reduce 作用对数组中所有的内容进行汇总
    new4Nums.reduce(function (preValue, n) {
        return preValue + n
    }, 0)

    // 第一次循环：preValue 0   n 20
    // 第二次循环：preValue 20   n 40
    // 第三次循环：preValue 60   n 80
    // 第四次循环：preValue 140   n 100
    // 最终结果：240

    // 链式调用
    let total2 = nums.filter(function (n) {
        return n < 100
    }).map(function (n) {
        return n * 2
    }).reduce(function (preValue, n) {
        return preValue + n
    }, 0)
    console.log(total2) // 240

    // 箭头函数链式调用
    let total3 = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n)
    console.log(total3) // 240



</script>